<template>
  <div>
    <headerT title="预约信息" />
    <div class="pageNormalBackground headMarginTop pagesMain">
      <div class="yuyueBg">
        <div class="everyPadding yuyueBoxBg">
          <div class="yuyueStatus">预约成功</div>
          <div class="everyBlockBgcolor goodsInfoBox">
            <div class="displayFlex goodsStore">
              <img  src="../../../static/images/store.png" alt=""/>
              <p>希诺(HEENOOR)希诺(HEENOOR)</p>
            </div>
            <div class="displayFlex goodsInfo">
              <img :src="yuyueInfo.good_info!=null?(yuyueInfo.good_info.good_img.length!=0?yuyueInfo.good_info.good_img[0].img_url:''):''" alt="" />
              <div class="goodsInfoContent">
                <div class="displayFlex goodsTitleBox">
                  <div
                    class="goodsTitle"
                  >{{yuyueInfo.good_info!=null?yuyueInfo.good_info.goods_title:''}}</div>
                  <!-- <div class="goodsPriceBox">
                    <p class="goodsPrice">￥60.00</p>
                    <p class="goodsNum">x3</p>
                  </div> -->
                </div>
                <div class="goodsLableBox" v-if="yuyueInfo.good_info!=null && yuyueInfo.good_info.good_specification.length!=0">
                  <span class="goodsLable" v-for="(item,index) in yuyueInfo.good_info.good_specification" :key="index">
                    {{item.attribute}}
                  </span>
                </div>
              </div>
            </div>
            <div class="goodsCodeBox">
              <div v-show="yuyueType==2" class="displayFlex goodsCode" >
                <div class="displayFlex goodsCodeTitle">
                  <img src="../../../static/images/code.png" alt />
                  <p>消费码</p>
                </div>
                <div>{{code}}</div>
              </div>
              <div class="displayFlex goodsCode" v-show="yuyueType==1"  v-for="(item,index) in yuyueInfo.appointment_code" :key="index">
                <div class="displayFlex goodsCodeTitle">
                  <img src="../../../static/images/code.png" alt />
                  <p>消费码</p>
                </div>
                <div>{{item.consume_code}}</div>
              </div>
              
              <div class="displayFlex goodsCode">
                <div class="displayFlex goodsCodeTitle goodsCodeTime">
                  <img src="../../../static/images/time.png" alt />
                  <p>入住日期</p>
                </div>
                <div>{{yuyueInfo.appointment_date}}</div>
              </div>
            </div>
            <div class="goodsTotalPriceBox">
              共{{yuyueInfo.appointment_number}}间，到店需付
              <span class="goodsTotalPrice">
                ￥<span>{{yuyueInfo.appointment_price}}</span>
              </span>
            </div>
          </div>

          <div class="everyBlockBgcolor userBox">
            <div class="displayFlex userListBox">
              <img class="userImg" src="../../../static/images/user.png" alt="" />
              <div class="displayFlex userName">
                <p>联系人</p>
                <p>{{yuyueInfo.real_name}}</p>
              </div>
            </div>
            <div class="displayFlex userListBox">
              <img class="userTel" src="../../../static/images/tel.png" alt="" />
              <div class="displayFlex userName userPhone">
                <p>联系电话</p>
                <p>{{yuyueInfo.real_phone}}</p>
              </div>
            </div>
            <div class="displayFlex userListBox premark">
              <img class="userRemark" src="../../../static/images/remark.png" alt="" />
              <div class="displayFlex userName">
                <p>备注</p>
                <p class="remark">{{yuyueInfo.remark}}</p>
              </div>
            </div>
          </div>

          <div class="everyBlockBgcolor orderBox">
            <div class="orderInfoBox">
              <p>订单详情</p>
              <p>订单编号:
                <span>{{yuyueInfo.appointment_indent}}</span>
              </p>
              <p>创建时间:
                <span>{{yuyueInfo.created_at}}</span>
              </p>

            </div>
            <div class="displayFlex contactStore">
              <img src="../../../static/images/tel.png" alt="" />
              <p>联系商家</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import headerT from "@/components/header";
import { appointmentDetails } from "@/services/yuyueProduct";
export default {
  name: "login",
  components: {
    headerT
  },

  data() {
    return {
      yuyueType:this.$route.query.yuyueType,//预约成功type(1:id，2：号码查找)
      yuyueId:this.$route.query.yuyueId,//预约成功id
      phone:this.$route.query.phone,//预约电话号码
      code:this.$route.query.code,//预约消费码

      yuyueInfo:'',//预约信息
    };
  },
  created(){
    this.getYuyueDetail()
  },
  watch: {},
  mounted(){
    this.getYuyueDetail()
  },
  methods: {
    getYuyueDetail(){
      let obj={
        id:this.yuyueId,
        phone:this.phone,
        code:this.code
      }

      this.$vux.loading.show({
        text: "Loading"
      });
      this.$post(appointmentDetails,obj).then(res=>{
        this.$vux.loading.hide();
        if(res.code==200 && res.data!=null){
          this.yuyueInfo=res.data
        }
      }).catch(error=>{
        this.$vux.loading.hide();
      })
    },
  }
};
</script>

<style lang="less" rel="stylesheet/less" type="text/css">
@colorRed: #f64135;
@color4e :#4E4E4E;
@color9e :#9F9F9F;
@fontsize32: 0.32rem;
@fontsize3: 0.3rem;
@fontsize37: 0.37rem;
.everyPadding {
  padding: 0.25rem;
}
.marginBottom{
  margin-bottom: 0.25rem;
}
.pagesMain {
  // padding-bottom:1.4rem;
}

.yuyueBg {
  width: 100%;
  height: 21.97rem;
  background-image: url("../../../static/images/yuyueSuccess.png");
  background-size: 100%;
  background-repeat: no-repeat;
  .yuyueBoxBg {
    // border: 1px solid red;
    width: 100%;
    height: 100%;
    background-image: url("../../../static/images/yuyueSuccessWhite.png");
    background-size: 100%;
    background-repeat: no-repeat;

    .yuyueStatus {
      font-size: 0.49rem;
      color: #ffffff;
      font-weight: bold;
      text-align: center;
      padding: 0.34rem 0 0.42rem 0;
    }

    .goodsInfoBox {
      height: auto;
      border-radius: 0.15rem;
      padding: 0 0.47rem 0 0.37rem;
      .goodsStore {
        font-size: @fontsize37;
        color: @color4e;
        img {
          display: block;
          width: 0.39rem;
          height: 0.34rem;
        }
        p {
          margin-left: 0.25rem;
          padding: 0.59rem 0 0.48rem 0;
          width: calc(~"100% - 0.8rem");
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 1;
          overflow: hidden;
          word-break: break-all;
        }
      }

      .goodsInfo {
        justify-content: space-between;
        font-size: @fontsize32;
        color: @color4e;
        img {
          display: block;
          width: 1.95rem;
          height: 1.8rem;
        }
        .goodsInfoContent {
          width: calc(~"100% - 2.2rem");
          margin-left: 0.2rem;

          .goodsTitleBox {
            height: 1rem;
            .goodsTitle {
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 2;
              overflow: hidden;
              word-break: break-all;
            }
            .goodsPriceBox {
              text-align: right;
              margin-left: 0.3rem;
              .goodsNum {
                color: #9b9b9b;
              }
            }
          }
          .goodsLableBox {
            margin: 0.1rem 0;
            font-size: 0.25rem;
            color: #ff9609;
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            .goodsLable {
              display: block;
              background: #fef3db;
              padding: 0.05rem 0.2rem;
              margin:0 0.2rem 0.2rem 0;
            }
          }
        }
      }

      .goodsCodeBox {
        border: 1px solid #d6d6d6;
        border-radius: 0.1rem;
        margin: 0.39rem 0 0.59rem 0;
        height: auto;
        font-size: @fontsize32;
        color: @color4e;
        font-weight: bold;
        .goodsCode {
          height: 1.33rem;
          justify-content: space-between;
          padding: 0 0.34rem;
          border-bottom: 1px solid #c9bcbc;
          .goodsCodeTitle {
            img {
              display: block;
              width: 0.37rem;
              height: 0.29rem;
            }
            p {
              margin-left: 0.37rem;
            }
          }
          .goodsCodeTime {
            img {
              display: block;
              width: 0.38rem;
              height: 0.38rem;
            }
          }
        }
        .goodsCode:last-child{
          border-bottom: none;
        }
      
      }

      .goodsTotalPriceBox{
        text-align: right;
        font-size: @fontsize32;
        color: #AEAEAE;
        padding: 0 0.25rem 0.25rem 0;
        .goodsTotalPrice{
          font-size: 0.3rem;
          color: @colorRed;
          font-weight: bold;
          margin-left: 0.25rem;
          span{
            font-size: 0.44rem;
          }
        }
      }
    }

    .userBox{
      height: auto;
      border-radius: 0.15rem;
      padding: 0 0.47rem 0 0.49rem;
      font-size: @fontsize32;
      color: @color4e;
      font-weight: bold;
      margin: 0.25rem 0 0.25rem 0;
      .userListBox{
        height: 1.63rem;
        img{
          display: block;
        }
        .userImg{
          width: 0.35rem;
          height: 0.35rem;
        }
        .userTel{
          width: 0.31rem;
          height: 0.31rem;
        }
        .userRemark{
          width: 0.33rem;
          height: 0.23rem;
        }
        .userName{
          width: calc(~'100% - 1rem ');
          margin-left: 0.37rem;
          justify-content: space-between;
          height: 100%;
        
          p:first-child{
            width: 1.5rem;
            margin-right: 0.3rem;
          }
          p:last-child{
            text-align: right;
            width: calc(~'100% - 1.8rem ');
            padding-right:0.2rem; 
          }
          
        }
        
        .userPhone{
          border-top: 1px solid #E2E2E2;
          border-bottom: 1px solid #E2E2E2;
        }
      }

      .premark{
          height: auto;
          padding: 0.3rem 0;
          p:first-child{
            width: 1.5rem;
            margin-right: 0.3rem;
          }
          p:last-child{
            width: calc(~'100% - 1.8rem ');
            padding: 0.2rem 0;
          }
        }
    }

    .orderBox{
      height: auto;
      padding: 0.34rem;
      border-radius: 0.15rem;
      .orderInfoBox{
        font-size: 0.32rem;
        color: #9F9F9F;
        p{
          padding: 0.2rem 0 0.1rem 0;
          span{
            margin-left: 0.54rem;
          }
        }
        p:first-child{
          font-size: @fontsize37;
          color: @color4e;
          padding: 0.15rem 0;
          font-weight:bold;
        }
      }

      .contactStore{
        justify-content: center;
        font-size: 0.32rem;
        color: #4E4E4E;
        border-top:1px solid #E1E1E1; 
        margin-top: 0.3rem;
        height: 1.23rem;
        img{
          display: block;
          width: 0.3rem;
          height: 0.3rem;
          margin-right: 0.3rem;
        }

      }
    }
  }
}
</style>
